<template>
  <div class="body">
    <div class="select">
      <el-table
        v-loading="loading"
        :data="
          lnglats.slice((currentPage - 1) * pageSize, currentPage * pageSize)
        "
        style="
          width: 100%;
          box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
          border-radius: 4px;
        "
      >
        <el-table-column prop="zm" label="站名"> </el-table-column>
        <el-table-column prop="time" label="日期"> </el-table-column>
        <el-table-column prop="htz" label="历史最高水位"> </el-table-column>
      </el-table>
      <div class="block" style="margin-top: 15px">
        <el-pagination
          align="center"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-size="pageSize"
          small
          layout="prev, pager, next"
          :total="lnglats.length"
        >
        </el-pagination>
      </div>
    </div>
    <div id="map"></div>
  </div>
</template>
<script>
import axios from "axios";
export default {
  name: "htzPage",
  data() {
    return {
      currentPage: 1, // 当前页码
      total: 10000, // 总条数
      pageSize: 10, // 每页的数据条数
      map: {},
      lnglats: [],
      loading: true
    };
  },
  mounted() {
    this.address();
  },
  methods: {
    //每页条数改变时触发 选择一页显示多少行
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.currentPage = 1;
      this.pageSize = val;
    },
    //当前页改变时触发 跳转其他页
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currentPage = val;
    },
    address() {
      axios.post("/selectAllHtz").then((res) => {
        this.lnglats = res;
        this.total = res.length;
        this.load();
        this.loading=false;
      });
    },
    //载入地图
    load() {
      const init = new Promise((resolve, reject) => {
        if (window.T) {
          console.log("地图初始化成功");
          resolve(window.T);
          reject("error");
        }
      });
      init.then((T) => {
        this.map = new T.Map("map");
        this.map.centerAndZoom(new T.LngLat(120, 29), 7);
        for (var i = 0; i < this.lnglats.length; i++) {
          let content = this.lnglats[i].name;
          let marker = new T.Marker(
            new T.LngLat(this.lnglats[i].jd, this.lnglats[i].wd)
          );
          this.map.addOverLay(marker);
          this.addClickHandler(content, marker);
        }
      });
    },

    addClickHandler(content, marker) {
      marker.addEventListener("click", (e) => {
        this.openInfo(content, e);
      });
    },
    openInfo(content, e) {
      let T = window.T;
      let point = e.lnglat;
      this.marker = new T.Marker(point); // 创建标注
      let markerInfoWin = new T.InfoWindow(content, {
        offset: new T.Point(0, -30),
      }); // 创建信息窗口对象
      this.map.openInfoWindow(markerInfoWin, point); //开启信息窗口
    },
  },
};
</script>

<style scoped>
.body {
  width: 100%;
  height: 100%;
}
#map {
  width: 100%;
  height: 100%;
}
.select {
  position: absolute;
  top: 8%;
  left: 65%;
  right: 5%;
  z-index: 999;
}
.select p {
  font-size: 17px;
  line-height: 10px;
  margin-right: 20px;
}
.select .btn {
  margin-left: 20px;
  height: 40px;
  width: 80px;
}
</style>